<template>
	<view class="content">
		<navagationbar></navagationbar>
		<view class="jobCard" v-if="searchData.length">
			<view :key="index" v-for="(item, index) in searchData" class="positionItem" @click="jobDetail(item)">
				<view class="positionContent">
					<view class="jobName">
						<text class="name">{{ item.name }}</text>
						<text class="salary">{{ item.salary }}</text>
					</view>
					<view class="jobCompany">
						<text>{{ item.recruitment.company }} {{ item.company.scale }} {{ item.company.financing }}</text>
					</view>
					<view class="jobLabel">
						<text :key="index" v-for="(item, index) in item.title" class="label">{{ item }}</text>
					</view>
					<view class="jobLocation">
						<text class="region">{{ item.postinfo.location }}</text>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<u-empty
			        mode="search"
			        icon="http://cdn.uviewui.com/uview/empty/search.png"
			>
			</u-empty>
		</view>
	</view>
</template>

<script>
	import navagationbar from '../../navigationBar.vue'
	import {mapState} from 'vuex'
	export default {
		components:{
			navagationbar
		},
		computed:{
			...mapState(['searchData'])
		},
		data() {
			return {
				
			}
		},
		methods: {
			jobDetail(_data) {
				this.$store.commit('setPostData', _data)
				uni.navigateTo({
					url: '../../postDetail/postDetail',
					animationType: 'pop-in',
					animationDuration: 200
				})
			}
		}
	}
</script>

<style lang="scss">
	.jobCard {
		width: 100%;
		border-bottom: 1rpx solid transparent;
		background-color: #eeeeee;
	
		.positionItem {
			width: 100%;
			background-color: white;
			margin-bottom: 20rpx;
	
			.positionContent {
				width: 95%;
				height: 100%;
				margin: 0 auto;
				padding-top: 10rpx;
				font-size: 30rpx;
				.jobName,
				.jobCompany {
					display: flex;
					flex-flow: row;
					justify-content: space-between;
					padding: 5rpx 10rpx;
					margin: 10rpx 0;
					.name {
						font-size: 40rpx;
					}
					.salary {
						font-size: 35rpx;
						color: rgb(89, 120, 254);
					}
				}
				.jobLabel {
					margin: 20rpx 0;
					padding: 5rpx 10rpx;
					.label {
						font-size: 27rpx;
						background-color: rgb(236, 236, 236);
						margin-right: 10rpx;
						padding: 10rpx;
						border-radius: 15rpx;
					}
				}
				.jobLocation {
					.region {
						margin-bottom: 10rpx;
						float: right;
					}
				}
				.jobLocation:after {
					content: '';
					display: block;
					clear: both;
				}
			}
		}
	}
</style>
